<template>
	<view style="overflow: hidden;">
		<view class="fund-contain"></view>
		<view class="deposit-fund first-style">
			<view style="text-align: center;font-size: 100upx;color: red;margin-top: 50upx;">￥{{pending_for_withdraw_amount||0.00}}<view class="fundCard-operation-tip" style="font-size: 20upx;">可提现</view></view>
			<view class="fundCard-operation-tip" style="font-size: 20upx;">
				可提现
			</view>
			<view style="text-align: center;font-size: 30upx;font-weight: bold;margin-bottom: 60upx;">被动收益</view>
			<view class="deposit-binding" @click="gotoWithdraw">
				提现到微信零钱
			</view>
			<view class="deposit-binding-tip" v-html="detuils"></view>
			<view v-html=""></view>
		</view>
		<view class="">
			<view class="group-state-title">
				<view class="" v-if="">
					<view v-if="withdraws.length>0">
						<view v-for="(withdraw,index) in withdraws" :key="index" class="olinecourse" >
							<view v-if="withdraw.pay_status==1&&withdraw.customer&&withdraw.new_user_money">
								<view class="topleft">
									<image style="width: 100%;height: 100%;" :src="withdraw.customer.avatar" mode="aspectFit"></image>
								</view>
								<view class="topright">{{withdraw.title}}</view>
								<view style="position: relative;top: -30upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">新人用户昵称：</text><text style="color: #000000;">{{withdraw.customer.nickname}}</text>
								</view>
								<view style="position: relative;top: -60upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">新人奖励金额：</text>
									<text style="color: red;">￥{{withdraw.new_user_money.money||withdraw.shared_customer1.money}}</text>
									<view style="position: relative;top: -68upx;left: 260upx;">
										<image style="width: 100upx;height: 100upx;" :src="withdraw.labelurl" mode=""/>
										<text style="position: relative;left:-80upx;top:-40upx;color:#F9F9F9">{{withdraw.label}}</text>
									</view>
								</view>
								<view style="font-size: 25upx;font-weight: bold;color: #999999;margin-top: 30upx;margin-bottom: 30upx;">
									<view style="">推荐成功规则：{{withdraw.illustration}}</view>
									<view style="">所属团队：{{withdraw.store.name || withdraw.store2.name}}</view>
								</view>
							</view>
							<view v-else-if="withdraw.pay_status==1&&withdraw.customer&&withdraw.reward_teacher_money" style="height: 250rpx;">
								<view class="topleft">
									<image style="width: 100%;height: 100%;" :src="withdraw.customer.avatar" mode="aspectFit"></image>
								</view>
								<view class="topright">招生老师收益</view>
								<view style="position: relative;top: -30upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">购买用户：</text><text style="color: #000000;">{{withdraw.customer.nickname}}</text>
								</view>
								<view style="position: relative;top: 0upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">招生老师：</text><text style="color: #000000;">{{withdraw.shared_customer.nickname}}</text>
								</view>
								<view style="position: relative;top: 30upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">时间：</text><text style="color: #000000;">{{withdraw.reward_teacher_money.creat_time}}</text>
								</view>
								<view style="position: relative;top: -60upx;left:220upx;font-size: 25upx;height: 0upx;">
									<text style="color: #999999;">金额：</text>
									<text style="color: red;">￥{{withdraw.reward_teacher_money.money||withdraw.shared_customer1.money}}</text>
									<view style="position: relative;top: -68upx;left: 260upx;">
										<image style="width: 100upx;height: 100upx;" :src="withdraw.labelurl" mode=""/>
										<text style="position: relative;left:-80upx;top:-40upx;color:#F9F9F9">{{withdraw.label}}</text>
									</view>
								</view>
							</view>
						</view>	
					</view>
					<view class="no-data"v-else>
						暂无数据
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				groupStatus:['已领取','已到账','已失效'],
				groupStatusIndex:0,
				store_id:0,
				total:0.00,
				pending_for_settlement_amount:0,
				pending_for_withdraw_amount:'',
				withdraws:[],
				incomes:[],
				page:1,
				page_size:100000,
				type:'',
				isd:'',
				rate:0,
				imglink: this.$store.state.imgLink,
				detuils:'',
				onlineList:'',
				options:''
			}
		},
		onLoad(options) {
			this.options=options
			let store_id = parseInt(options.store_id,10);
			// console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.pending_for_withdraw_amount=options.money
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			// this.isd = parseInt(options.isd,10)
			// console.log(this.isd,"++++++++++++++++++++++++++++++++++");
			// this.getonlineList()
			// this.getorder()
			// this.getprotocol()
		},
		// filters:{
		// 	formatDates(value) {
		// 		let date = new Date(value * 1000);
		// 		let y = date.getFullYear();
		// 		let MM = date.getMonth() + 1;
		// 		MM = MM < 10 ? ('0' + MM) : MM;
		// 		let d = date.getDate();
		// 		d = d < 10 ? ('0' + d) : d;
		// 		let h = date.getHours();
		// 		h = h < 10 ? ('0' + h) : h;
		// 		let mm = date.getMinutes();
		// 		mm = mm < 10 ? ('0' + mm) : mm;
		// 		let s = date.getSeconds();
		// 		s = s < 10 ? ('0' + s) : s;
		// 		return y + '-' + MM + '-' + d + '  ' + h + ':' + mm + ':' + s;
		// 	}
		// },
		onShow(){
			// this.get_store_capital();
			let store_id = parseInt(this.options.store_id,10);
			// console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.pending_for_withdraw_amount=this.options.money
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			// this.isd = parseInt(options.isd,10)
			// console.log(this.isd,"++++++++++++++++++++++++++++++++++");
			this.getonlineList()
			this.withdraws = []
			this.getorder()
			this.getprotocol()
		},
		methods:{
			getonlineList(){
				const data={
					token:this.$store.getters.token,
					store_id:this.store_id,
					loading:1
				}
				this.$api.get_online_courses(data).then(res=>{
					uni.showLoading({
						title: '加载中...',
					})
					this.onlineList=res.list
					// console.log(this.onlineList,"78")
				})
			},
			getprotocol(){
				let data = {
					token:this.$store.getters.getToken,
					loading:1
				}
				this.$api.bingind_protocol(data).then(res => {
					// console.log(res,"996")
					res.list.data.map(item=>{
						// console.log("123",item)
						if(item.title.match("新人推荐奖励说明")){
							this.detuils=item.content
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			async getorder(){
				let userInfo = uni.getStorageSync('userInfo')
				let id = userInfo.customer_id
				
				const data={
					token:this.token,
					store_id1:this.store_id,
					store_id2:this.store_id,
					// customer_id:parseInt(id,10),
					shared_customer_id:parseInt(id,10),
					page:1,
					pagesize:1000000,
					loading:1
				}
				
				await this.$api.get_online_courses_order(data).then(res=>{
					// console.log(this.imglink,"nnnnnnnnnnnnn")
					// return
					if(res.list.data.length==0){
						uni.hideLoading();
					}else{
						res.list.data.map(item=>{
								this.onlineList.map(ress=>{
									if(ress.id==item.online_courses_id){
										item.second_money=ress.second_money
										item.img=ress.img
										item.illustration=ress.illustration
										if(item.shared_customer2==null){
											item.shared_customer2={money:0}
											if(item.shared_customer1==null){
												
											}
										}
										// if(this.withdraws.length!=0){
										// 	uni.hideLoading();
										// }
									}
							})
							if(item.new_user_money){
								if(item.new_user_money.status=='in_confirm'){
									item.labelurl=this.imglink+'member/bluelabel.svg'
									item.label="待确认"
									// uni.hideLoading()
								}else if(item.new_user_money.status=='confirmed'){
									item.labelurl=this.imglink+'member/greenlabel.svg'
									item.label="已到账"
									// that.withdraws.push(item)
									// uni.hideLoading()
								}else if(item.new_user_money.status=='invalid'){
									item.labelurl=this.imglink+'member/redlabel.svg'
									item.label="已失效"
									// that.withdraws.push(item)
									// uni.hideLoading()
								}
								this.withdraws.push(item)
							}
							if(item.reward_teacher_money){
								if(item.reward_teacher_money.status=='in_confirm'){
									item.labelurl=this.imglink+'member/bluelabel.svg'
									item.label="待确认"
									// uni.hideLoading()
								}else if(item.reward_teacher_money.status=='confirmed'){
									item.labelurl=this.imglink+'member/greenlabel.svg'
									item.label="已到账"
									// that.withdraws.push(item)
									// uni.hideLoading()
								}else if(item.reward_teacher_money.status=='invalid'){
									item.labelurl=this.imglink+'member/redlabel.svg'
									item.label="已失效"
									// that.withdraws.push(item)
									// uni.hideLoading()
								}
								this.withdraws.push(item)
							}
						})
						uni.hideLoading();
					}
					console.log(this.withdraws,"vvvvvvvvvvvvvkkkkkkkkkkkkkkkkk")
				})
				
			},
			get_store_capital(){
				const that = this
				let data = {
					token:that.token,
					loading:1
				}
				that.$api.get_store_capital(data).then(res => {
					// console.log(res,'get_store_capital')
					if(res.status){
						// console.log(that.isd,"+++++++++++++++++++++++++++++++++++++");
						// console.log(res.storeInfo,"+++++++++++++++++++++++++++++++++++++")
						if(that.isd == 1){
							that.total = res.data.wx.total
							that.pending_for_settlement_amount = res.data.wx.pending_for_settlement_amount
							// that.pending_for_withdraw_amount = res.data.wx.pending_for_withdraw_amount
							that.rate = res.storeInfo.rate_wx
							// console.log(res.storeInfo,"+++++++++++++++++++++++++++++++++++++")
						}else{
							that.total = res.data.bank.total
							that.pending_for_settlement_amount = res.data.bank.pending_for_settlement_amount
							that.pending_for_withdraw_amount = res.data.bank.pending_for_withdraw_amount
							if( res.storeInfo.is_huifu_up == 1 ){
								that.rate = res.storeInfo.rate_up
							}else{
								that.rate = res.storeInfo.rate_down
							}
							// console.log(res.storeInfo,"storeInfo")
						}
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
						
					}
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:"none",
						duration:2000
					})
					
					// console.log(err,'that.$api.get_store_income')
				})
			},
			changeIndex(index){
				
				this.groupStatusIndex = index
				
			},
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/memberCenter/fundManage/deposit/deposit?store_id=' + this.store_id + '&type=1' + '&is_online=1&is_online_courses=0'
				})
			}
		}
	}
</script>

<style>
	.olinecourse{
		/* box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13); */
		border: solid rgba(0,0,0,0.13) 1px;
		border-left: none;border-right: none;border-top: none;
		padding: 15upx;
		padding-left: 0upx;
		padding-right: 0upx;
		width: 580upx;
		height: 100%;
		margin-left: 30upx;
	}
	.label{
		width: 200upx;
		background-image: required("https://tool.tuanhaoke.cn/static/image/member/orangelabel.svg");
	}
	.topleft{
		width: 180upx;
		height: 150upx;
		/* position: relative; */
		left: 0upx;
	}
	.topright{
		width: 400upx;
		height: 00upx;
		font-size: 25upx;
		font-weight: bold;
		position: relative;
		left: 220upx;
		top:-130upx;
	},
	.zhengti{
		width: 680upx;
	}
	page{
		background: #F3F3F4;
	}
	.fund-contain{
		width: 100%;
		height: 408upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/fund.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 46upx;
		box-sizing: border-box;
	}
	.fund-contain-amount{
		position: relative;
	}
	.fund-contain-amount>view:first-child{
		text-align: center;
		color: #FFFFFF;
		font-size: 60upx;
		margin-top: 14upx;
	}
	.fund-contain-amount>view:first-child>text{
		font-size: 40upx;
	}
	.fund-contain-amount>view:last-child{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		font-size: 20upx;
		border-radius: 18upx 18upx 18upx 0;
		background: #FFFFFF;
		position: absolute;
		top: -16upx;right: 220upx;
	}
	.fund-contain-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		margin-top: 6upx;
	}
	.deposit-fund{
		width: 100%;
		height: 376upx;
		background: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.first-style{
		width: 680upx;
		height: 100%;
		margin-left: 36upx;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: -380upx;
	}
	.deposit-fund-content{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.deposit-fund-content-details{
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child{
		color: #333333;
		font-size: 36upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child>text{
		font-size: 28upx;
	}
	.deposit-fund-content-details>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 18upx;
	}
	.deposit-binding{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 18upx 0 rgba(255, 111, 95, 0.18);
	}
	.deposit-binding-tip{
		/* text-align: center; */
		color: #333333;
		font-size: 24upx;
		margin-top: 30upx;
	}
	.group-state-title{
		width: 680upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
		margin-left: 35upx;
		border-radius:24upx;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		/* border-bottom: 1upx solid #DEDEDE; */
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.user-fund-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.staff-name-img{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.staff-per-msg{
		display: flex;
	}
	.staff-name-img>view>image{
		width: 80upx;
		height: 80upx;
	}
	.staff-name{
		color: #333;
		font-size: 28upx;
		line-height: 80upx;
		margin-left: 20upx;
		width:150upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.staff-time{
		color: #999;
		font-size: 24upx;
		line-height: 80upx;
	}
	.staff-time>text{
		color: #333333;
		font-size: 18upx;
	}
	.staff-phone{
		width: 100%;
		display: flex;
		padding-left: 100upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.staff-phone-details{
		color: #666666;
		font-size: 28upx;
		line-height: 40upx;
	}
	.dial-phone{
		width: 128upx;
		height: 44upx;
		line-height: 44upx;
		border-radius: 4upx;
		text-align: center;
		font-size: 24upx;
	}
	.withdraw{
		background: rgba(255, 139, 70, 0.17);
		color: #FF8B46;
	}
	.unwithdraw{
		background: rgba(255, 139, 70, 0.17);
		color: #FF391F;
	}
	.refund{
		background: #F2F2F2;
		color: #666666;
	}
	.we-chat{
		margin-left: 72upx;
		color: #666666;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.pay-status{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		font-size: 28upx;
	}
	.pay-status>view:first-child{
		color: #666666;
		margin-left: 100upx;
	}
	.pay-statu-ssucced{
		color: #33B888;
	}
	.pay-status-refund{
		color: #FF391F;
	}
	.expend-content{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		padding:  0 30upx;
		box-sizing: border-box;
	}
	.expend-details-content{
		width: 100%;
		padding: 34upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.expend-details-content:last-child{
		border: 0;
	}
	.expend-details-time{
		color: #333333;
		font-size: 28upx;
		margin-right: 86upx;
	}
	.expend-details-state{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
	}
	.expend-details-state>view:last-child{
		color: #333333;
	}
	.expend-state-hand{
		color: #333333;
	}
	.expend-state-succed{
		color: #33B888;
	}
	.expend-state-bad{
		color: #FF391F;
	}
	.no-data{
		font-size: 28upx;
		color:#b1b1b1;
		width: 100%;
		background: #FFFFFF;
		height:200upx;
		line-height: 200upx;
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}
	.fundCard-operation-tip{
		position: absolute;
		top:130upx;
		left: 520upx;
		color: #FFFFFF;
		padding: 0 10upx;
		background: #FF391F;
		border-radius: 14upx 14upx 14upx 0;
		text-align: center;
	}
</style>
